import React, { useEffect, useState } from 'react'
import './index.css'
import Header from '../../../components/Header'
import * as echarts from 'echarts'
import touImg from '../../../assets/image/头像 女孩 (3).png'


export default function Money() {
    const [list, setList] = useState([1, 2, 3, 4, 5, 6]);

    useEffect(() => {
        // 初始化echarts实例，将其挂载到id为main的dom元素上展示 
        var myChart = echarts.init(document.getElementById("main"));
        // 绘制图表 
        myChart.setOption({
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['中餐', '汉堡', '饮料', '外卖']
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: 335, name: '中餐' },
                        { value: 310, name: '汉堡' },
                        { value: 234, name: '饮料' },
                        { value: 135, name: '外卖' },
                    ]
                }
            ]
        });
    }, [])


    return (
        <div>
            <Header />
            <div className='money_echart'>
                <div className='money_tittle'>零钱分布</div>
                <div id="main" style={{ width: 350, height: 200 }}></div>
            </div>
            <div className='money_box'>
                <div className='money_tittle'>
                    本月共计花费：500元
                </div>
                <div className='money_banner'>
                    {
                        list.map((item) => {
                            return (
                                <div className='mess_hang'>
                                    <div className='mess_hang_left'>
                                        <div>
                                            <img src={touImg} alt="" className='mess_img' />
                                        </div>
                                        <div className='mess_info'>
                                            <h3>xxx食堂</h3>
                                            <div className='mess_info_xia'>2024-04-10</div>
                                        </div>
                                    </div>
                                    <div className='mess_hang_right'>
                                        -300
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>


        </div>
    )
}
